<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div空间 特点：有宽没高  设置宽高*/
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* 什么是盒模型 ？
				任何元素存在于盒模型中
				2.盒模型包括什么？
				外边距+边框+内边距+内容
				3.外边距margin属性
				边框以外距离使用方式与border类似【微调：推】
				语法：margin：属性值：为1个值，顺时针，代表方向：上 右 下 左
				                    为2个值，顺时针，代表方向：上下   右左
									常用自使用居中
									为3个值，顺时针，代表方向：上右   左下
									为4个值，顺时针，代表方向：上 右 下左 
				3.1外边距-方向属性
					margin-left：数值px;   √    x方向微调
					margin-right：数值px;
					margin-top：数值px;    √    Y方向微调
					margin-bottom 数值px;
					4.内边距padding属性，padding-方向与margin-方向用法一致
					边框与内容之间的距离 使用方式与margin类似【精灵图：撑】
					语法：padding：属性值：为1个值，顺时针，代表方向：上 右 下 左
									                    为2个值，顺时针，代表方向：上下   右左
														常用自使用居中
														为3个值，顺时针，代表方向：上右   左下
														为4个值，顺时针，代表方向：上 右 下 左
				*/
			   padding: 50px 100px;
			   padding: 10px 20px 30px;
			   margin:100px;
			   margin: 100px 200px;
			   margin: 100px 200px 300px;
			   margin: 100px 200px 300px 400px;
			   margin-left:150px;
			   /* 元素自适应居中	*/
			   margin: 0 auto;
			}
		</style>
	</head>	
	<body>
		<div></div>
	</body>
</html>